@extends('admin.layout.main')
@section('content')
<link rel="stylesheet" href="{{asset('/adminlte/plugins/datepicker/datepicker3.css')}}">
 <section class="content-header">
  <h1>
    游戏记录
  </h1>
  <ol class="breadcrumb">
    <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 游戏用户</a></li>
    <li class="active">游戏记录</li>
  </ol>
</section>
<section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
    	<div class="col-md-12">
            <div class="dataTables_filter">
                <form action="" method="GET">
                    <button type="submit" class="btn btn-info btn-sm">查询:</button>
                  	<button style="height:30px;line-height:18px" type="button" class="btn btn-default" id="daterange-btn">
                        <span>
                          <i class="fa fa-calendar"></i>
                        </span>
                        <i class="fa fa-caret-down"></i>
                      </button>
                    
                    <input type="hidden" name="time">
                </form>
            </div>
          	<ul class="timeline">
	            <!-- timeline time label -->
	            <li class="time-label">
	                  <span class="bg-green">
              			{{$time}}
	                  </span>
	            </li>
	            <!-- /.timeline-label -->
          		@foreach($games as $game)
		            <!-- timeline item -->
		            <li>
		              <i class="fa fa-fw fa-gamepad	bg-blue"></i>

		              <div class="timeline-item">
		                <span class="time"><i class="fa fa-clock-o"></i> {{ date('Y-m-d H:i', $game->create_time) }}</span>

		                <h3 class="timeline-header"><a href="javascript:void(0)"></a></h3>

		                <div class="timeline-body">
		                	{{$game->gameName()}}
		                </div>
		                <div class="timeline-footer">
		                	<a href="javascript:void(0)" class="btn btn-success btn-sm view-detail" gid="{{$game->room_uuid}}">查看详情</a>
		                </div>
		              </div>
		            </li>
	            @endforeach
	            <!-- end -->
	            <li>
	              <i class="fa fa-clock-o bg-gray"></i>
	            </li>
        	</ul>
    	</div>
    </div>
</section>
<script src="{{asset('/adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script type="text/javascript">
    $(function () {
        //Date range as a button
        $('#daterange-btn').daterangepicker(
            {
              ranges: {
                '今天': [moment(), moment().add(1, 'days')],
                '昨天': [moment().subtract(1, 'days'), moment()],
                '最近7天': [moment().subtract(6, 'days'), moment().add(1, 'days')],
                '最近30天': [moment().subtract(29, 'days'), moment().add(1, 'days')],
                '本月': [moment().startOf('month'), moment().endOf('month')],
                '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              },
              startDate: moment().subtract(29, 'days'),
              endDate: moment()
            },
            function (start, end) {
              $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));
              $("input[name = time]").val(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));
            }
        );
    });

    $('.view-detail').click(function(){
    	var gid = $(this).attr('gid');
    	dialog_group('/admin/users_new/game_detail/?room_uuid='+gid, '游戏详情');
    });

</script>
@endsection